<template>
  <div class="scrollbox">
    <!-- 头部 -->
    <v-header></v-header>
    <div class="dis10"></div>
    <div class="listbox aps8">
      <v-list
        api="system.get_sys_union"
        ref="list"
        cards="1"
        :cols="cols"
        :params="params"
        :hidSearch="true"
      >
        <template slot="search">
          <el-button
            class="operate"
            size="small"
            type="primary"
            icon="el-icon-plus"
            @click="edit(params)"
          >新增联盟</el-button>&nbsp;&nbsp;&nbsp;
          <span class="fr">
            <el-button class="operate" size="small" type="default" @click="clearcache">清除缓存</el-button>
          </span>
        </template>
        <template slot="head" slot-scope="props">
          <thead>
            <tr class="tr">
              <th class="c1">联盟名称</th>
              <th>联盟编码</th>
              <th>绑定域名</th>
              <th>备注</th>
              <th>操作</th>
            </tr>
          </thead>
        </template>
        <template slot="item" slot-scope="props">
          <tr>
            <td class="c1 cursor-pointer" @click="setBaseInfo(props.item)">
              <span class="font-blue f14">{{props.item.name}}</span>
              <span class="sort f11 font-gray2">({{props.item.sort}})</span>
            </td>
            <td class="font-gray2">{{props.item.union_id}}</td>
            <td class="font-gray">
              <p class="domainClass">{{props.item.domain}}</p>
            </td>
            <td class="font-gray">{{props.item.remark}}</td>
            <td class="t0">
              <el-button
                size="mini"
                icon="el-icon-edit"
                type="primary"
                circle
                @click="edit(props.item)"
              ></el-button>
              <el-button
                size="mini"
                type="default"
                icon="el-icon-delete"
                circle
                @click="del(props.item)"
              ></el-button>
            </td>
          </tr>
        </template>
      </v-list>
    </div>

    <!-- 编辑 -->
    <el-dialog :title="editData.title" :visible.sync="editData.status" width="680px" top="7vh">
      <div class="dialogform">
        <el-form
          :model="form"
          :rules="rules"
          ref="form"
          label-width="120px"
          label-position="right"
          class="demo-ruleForm"
        >
          <el-form-item label="联盟编码" prop="union_id">
            <el-input :disabled="form.id > 0" v-model="form.union_id" class="w200"></el-input>
          </el-form-item>
          <el-form-item label="联盟名称" prop="name">
            <el-input v-model="form.name" class="w400"></el-input>
          </el-form-item>
          <el-form-item label="绑定域名">
            <el-input v-model="form.domain" type="textarea" rows="6" class="w400"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form.remark" class="w400"></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input v-model="form.sort" class="w200"></el-input>
          </el-form-item>
          <el-form-item label prop="inlock">
            <el-button type="primary" @click="save">保 存</el-button>
            <el-button @click="editData.status = false">取 消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <!-- 编辑结束 -->
    <!-- 详情开始 -->
    <v-baseinfo v-model="drawer.show" :name="drawer.name">
      <div class="wrapper-content" slot="sys/union" v-if="drawer.show">
        <div class="content-item">
          <span class="label">联盟编码：</span>
          <span class="value">{{drawer.data.union_id || '-'}}</span>
        </div>
        <div class="content-item">
          <span class="label">联盟名称：</span>
          <span class="value">{{drawer.data.name || '-'}}</span>
        </div>
        <div class="content-item" style="display: flex">
          <span class="label">绑定域名：</span>
          <span class="value" v-if="drawer.data.domain">
            <span v-for="(el, inx) in drawer.data.domain.split('\n')" :key="inx">{{el}}</span>
          </span>
          <span v-else>-</span>
        </div>
        <div class="content-item">
          <span class="label">备注：</span>
          <span class="value">{{drawer.data.remark || '-'}}</span>
        </div>
        <div class="content-item">
          <span class="label">排序：</span>
          <span class="value">{{drawer.data.sort || '-'}}</span>
        </div>
      </div>
    </v-baseinfo>
    <!-- 详情结束 -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        id: "",
        name: "",
        union_id: "",
        domain: "",
        remark: "",
        sort: 0
      },
      editData: {
        status: false,
        title: "新增/修改联盟",
        id: 0
      },
      rules: {
        union_id: [
          {
            type: "string",
            required: true,
            message: "请输入联盟编码",
            trigger: "blur"
          },
          { min: 1, message: "联盟编码不能为空", trigger: "blur" }
        ],
        name: [
          {
            type: "string",
            required: true,
            message: "请输入联盟名称",
            trigger: "blur"
          },
          { min: 1, message: "联盟名称不能为空", trigger: "blur" }
        ]
      },
      params: {
        hidePage: true
      },
      cols: "200,110,0,130,120",
      menu: [
        { key: "sys", value: "系统" },
        { key: "console", value: "控制台" }
      ],
      drawer: {
        show: false,
        data: {},
        name: "联盟"
      }
    };
  },
  methods: {
    edit(item) {
      this.editData.status = true;
      this.editData.id = item.id || 0;
      this.form.id = this.editData.id;
      this.form.union_id = item.union_id || "";
      this.form.name = item.name || "";
      this.form.domain = item.domain || "";
      this.form.remark = item.remark || "";
      this.form.sort = item.sort || 0;
    },
    save() {
      let that = this;
      this.form.sort = parseInt(this.form.sort);
      that.$refs["form"].validate(valid => {
        if (valid) {
          let url =
            that.editData.id > 0
              ? "system.edit_sys_union"
              : "system.add_sys_union";
          that.$api.jpost(url, that.form).then(res => {
            if (res.status === 1) {
              this.$success(res.msg);
              that.$refs.list.fetchData();
              that.editData.status = false;
            } else {
              that.$error(res.msg);
            }
          });
        }
      });
    },
    // 清除整站缓存
    clearcache() {
      this.$api.get("system.clear_cache").then(res => {
        if (res.status === 1) {
          this.$success(res.msg);
        } else {
          this.$error(res.msg);
        }
      });
    },
    del(row) {
      let that = this;
      that
        .$confirm("此操作会将该彻底删除，不可恢复, 是否继续?", "删除提醒")
        .then(() => {
          that.$api
            .jpost("system.delete_sys_union", { id: row.id })
            .then(res => {
              if (res.status === 1) {
                that.$success(res.msg);
                that.$refs.list.fetchData();
              } else {
                that.$error(res.msg);
              }
            });
        })
        .catch(() => {});
    },
    setBaseInfo(item) {
      this.drawer.show = true;
      this.drawer.data = item;
    }
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.tabs {
  width: 290px;
}
/deep/.dialogform {
  .el-form > .el-form-item:nth-last-child(1) {
    margin-bottom: 5px;
  }
}
</style>
